<template>
  <div>
    <layout-main>
      <template #left>
        <echart-main class="echartMain">
          <template #title> 农民性别、劳动力 </template>
          <template #echart>
            <echart :options="options1" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 农民性别、学历 </template>
          <template #echart>
            <echart :options="options2" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 残疾类型 </template>
          <template #echart>
            <echart :options="options3" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 收入来源 </template>
          <template #echart>
            <echart :options="options4" />
          </template>
        </echart-main>
      </template>
      <template #right>
        <echart-main class="echartMain">
          <template #title> 参加养老、医疗保险情况 </template>
          <template #echart>
            <div class="ylao-yliao">
              <div class="option">
                <echart :options="options5One" />
              </div>
              <div class="option">
                <echart :options="options5Two" />
              </div>
            </div>
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 健康分析 </template>
          <template #echart>
            <echart :options="options6" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 建档立卡户/人口统计 </template>
          <template #echart>
            <echart :options="options7" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 防反贫监测户统计 </template>
          <template #echart>
            <echart :options="options8" />
          </template>
        </echart-main>
      </template>
      <template #bottom1>
        <echart-main class="bot">
          <template #title> 年龄结构统计 </template>
          <template #echart>
            <echart :options="options9" />
          </template>
        </echart-main>
      </template>
      <template #bottom2>
        <echart-main class="bot">
          <template #title> 民族成分统计 </template>
          <template #echart>
            <echart :options="options10" />
          </template>
        </echart-main>
      </template>
    </layout-main>
    <!-- <slant-photo2 @openImg="openImg"/> -->
    <people-info v-if="isImg" :imgUrl="imgUrl" @closeImg="closeImg"/>
  </div>
</template>

<script>
import LayoutMain from "components/content/layoutMain/LayoutMain.vue";
import EchartMain from "components/content/echartMain/EchartMain.vue";
import Echart from "components/common/echart/Echart.vue";
import {
  echarts1,
  echarts2,
  echarts3,
  echarts4,
  echarts6,
  echarts8,
  echarts9,
  echarts10,
  echarts11,
  echarts12,
  echarts13,
} from "./echartjs/echarts-nm";
import SlantPhoto2 from './3D/SlantPhoto2.vue';
import PeopleInfo from 'components/content/item/PeopleInfo.vue';

export default {
  components: { LayoutMain, EchartMain, Echart, SlantPhoto2, PeopleInfo },
  data() {
    return {
      options1: null,
      options2: null,
      options3: null,
      options4: null,
      options5One: null,
      options5Two: null,
      options6: null,
      options7: null,
      options8: null,
      options9: null,
      options10: null,
      url: "http://123.56.65.68:8090/iserver/services/3D-hhlwrite/rest/realspace",
      isImg: false,
      imgUrl: ''
    };
  },
  created() {
    this.echarts();
  },
  mounted() {
    
  },

  methods: {
    closeImg() {
      this.isImg = false
    },
    openImg(n) {
      this.isImg = true
      this.imgUrl = n
    },
    echarts() {
      this.options1 = echarts1({
        class: ["有", "无"],
        man: [100, 200],
        woman: [200, 400],
      });
      this.options2 = echarts2({
        class: ["文盲", "初中", "技校", "大专"],
        man: [100, 200, 300, 400],
        woman: [200, 400, 600, 800],
      });
      this.options3 = echarts3([
        { name: "视力残疾", value: 100 },
        { name: "听力残疾", value: 200 },
        { name: "语言残疾", value: 300 },
        { name: "肢体残疾", value: 400 },
        { name: "智力残疾", value: 500 },
        { name: "精神残疾", value: 600 },
        { name: "其他", value: 700 },
      ]);
      this.options4 = echarts4([
        { name: "务农", value: 100 },
        { name: "打工", value: 200 },
        { name: "无业", value: 300 },
        { name: "个体户", value: 400 },
      ]);
      this.options5One = echarts12(55);
      this.options5Two = echarts13(45);
      this.options6 = echarts6(
        ["健康", "大病", "长期慢性病", "残疾"],
        [100, 200, 300, 400]
      );
      this.options7 = echarts11(
        ["脱贫", "低保", "五保", "普通"],
        [
          {
            name: "农户",
            type: "bar",
            data: [202, 113, 6, 395],
          }
        ]
      );
      this.options8 = echarts8(
        ["一般脱贫户", "脱贫不稳定户", "边缘易致贫户", "严重困难户"],
        [202, 15, 4, 0]
      );
      this.options9 = echarts9([
        { name: "10岁以下", value: 100 },
        { name: "10-19岁", value: 200 },
        { name: "20-34岁", value: 300 },
        { name: "35-49岁", value: 400 },
        { name: "50-65岁", value: 400 },
        { name: "65岁以上", value: 400 },
      ]);
      this.options10 = echarts10([
        { name: "汉族", value: 100 },
        { name: "满族", value: 200 },
        { name: "壮族", value: 300 },
        { name: "苗族", value: 400 },
        { name: "回族", value: 400 },
      ]);
    },
  },
};
</script>

<style lang="scss" scoped>
.echartMain {
  height: 25%;
}
.bot {
  height: 100%;
}

.ylao-yliao {
  width: 100%;
  height: 100%;
  display: flex;
  .option {
    flex: 1;
  }
}
</style>